<template>
  <div id="home">
    <nav-bar class="home-nav">
      <div slot="left">
        <a href="https://gitee.com/fang-shengyu/supermall">
          <img src="../../../public/logo.png" alt="">
        </a>
        
      </div>
      <div slot="center">FangMall</div>
    </nav-bar>

    <scroll class="content" ref="scroll" :probe-type="3" @scroll="scrollCon">
      <home-swiper :banners="banners"/>
      <router-link to='/home/recommend'>
        <recommend-view :recommends="recommends"></recommend-view>
      </router-link>
      
      <feature-view></feature-view>
      <tab-control class="tab-control" 
      :titles="['流行','新款','精选']" 
      @tabClick="tabClick"></tab-control>
      <!-- 绑定事件 接收子组件传递 -->
      <goods-list :goods="showGoods"></goods-list>
      
    </scroll>
    
    <!-- 组件无法直接监听点击事件 需要.native -->
    <back-top @click.native="backClick"></back-top>
  </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar.vue';
import HomeSwiper from './childComps/HomeSwiper';
import RecommendView from './childComps/RecommendView';
import FeatureView from './childComps/FeatureView';
import TabControl from 'components/content/tabControl/TabControl';
import GoodsList from 'components/content/goods/GoodsList';
import Scroll from 'components/common/scroll/Scroll';
import BackTop from 'components/content/backTop/BackTop';

import { getHomeMultidata,getHomeGoods } from 'network/home.js';

  export default {
      name: 'Home',
      // 导入其他组件后要注册才能使用
      components: {
        NavBar,
        HomeSwiper,
        RecommendView,
        FeatureView,
        TabControl,
        GoodsList,
        Scroll,
        BackTop,
      },
      //存储请求来的数据
      data() {
        return {
          banners: [],
          recommends: [],
          goods: {
            'pop': {page: 0,list:[]},
            'new': {page: 0,list:[]},
            'sell': {page: 0,list:[]},
          },
          // 定义type用来存储点击到的类型
          currentType: 'pop'
        }
      },
      computed: {
        showGoods() {
          return this.goods[this.currentType].list
        }
      },
      // 生命周期函数
      created() {
        //1.请求多个数据
        //调用方法后 使用then才能拿到请求的数据
        this.getHomeMultidata()

        //2. 请求商品数据
        this.getHomeGoods('pop')
        this.getHomeGoods('new')
        this.getHomeGoods('sell')
      },
      methods: {
        // 事件监听
        tabClick(index) {
          switch(index) {
            case 0:
              this.currentType = 'pop'
              break
            case 1:
              this.currentType = 'new'
              break
            case 2:
              this.currentType = 'sell'
              break
          }
        },
        backClick() {
          // this.$refs.scroll.data.scroll.scrollTo(0,0)
          console.log('123')
        },
        scrollCon(e){
          let conScrollHeight = e.target.scrollHeight   // 可以滚动区域的高度
          let conClientHeight = e.target.clientHeight   // 区域内容的高度
          let conScrollTop = e.target.scrollTop		 //  内容滚动了的高度
          // 内容滚动了的高度 +  区域内容的高度 >= 可以滚动区域的高度 
          // 则证明滑动到了页面底部，这个时候就去处理加载更多的逻辑
          console.log(conScrollHeight, conClientHeight, conScrollTop)
          if (conScrollTop + conClientHeight >= conScrollHeight) {
            console.log('加载更多')
        }
        },

        // 网络请求
        getHomeMultidata() {
          getHomeMultidata().then(res => {
            // console.log(res);
            this.banners = res.data.banner.list;
            this.recommends = res.data.recommend.list;
          })
        },
        getHomeGoods(type) {
          const page = this.goods[type].page + 1
          getHomeGoods(type,page).then(res => {
            // console.log(res);
            // 不能这样使用 新的数组添加会覆盖之前添加的
            // this.goods.pop.list = res.data.list
            this.goods[type].list.push(...res.data.list)
            this.goods[type].page += 1
          })
        }
      }
  }
</script>


<style scoped>
/* scoped作用域 只会对当前起效果 */
  #home{
    /* padding-top: 44px; */
    /* height: 3000px; */
    height: 100vh;
    position: relative;
  }

  .home-nav {
    /* background-color: var(--color-tint); */
    /* background-color: rgb(122, 217, 248); */
    background-color: lightblue;
    color: #fff;

    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9;
  }
  .home-nav img{
    width: 40px;
    height: 40px;
    margin-top: 2px;
    margin-left: -8px;
  }
  .tab-control {
    position: sticky;
    /* position: relative; */
    top: 43px;
    z-index: 50;
  }
  .content {
    /* height: 300px; */
    /* overflow: hidden; */
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
    /* height: calc(100% - 93px);
    margin-top: 44px; */
  }
</style>
